<template>
  <!-- 地下播放栏 -->
  <div class="play-music"
       v-if="playList!==null">
    <!-- 当前播放的音乐 -->
    <player v-show="isPlayerShow"
            ref="player"
            :music="playList[currentIndex]"
            :lyric="lyric" />
    <!-- 播放条上半部分 -->
    <div class="top"
         v-if="playList[currentIndex].pic!=null">
      <!-- 音乐背景图片点击播放与暂停 -->
      <div class="music-top-icon"
           @mouseenter="isShade=true"
           @mouseleave="isShade=false"
           @click="PlayerRouter()">
        <img :src="playList[currentIndex].pic"
             alt="">
        <div class="music-max"
             v-show="isShade">
          <img src="~assets/img/playmusic/max.svg"
               alt />
        </div>
      </div>
      <!-- 歌手和歌名 -->
      <div class="music-top-center">
        <div class="music-title">{{playList[currentIndex].title}}</div>
        <div class="music-artist">{{playList[currentIndex].artist}}</div>
      </div>
    </div>
    <div class="bottom">
      <!-- 播放列表 -->
      <play-music-list class="play-music-list"
                       v-show="isMusicList"
                       :music-list="musicList" />
      <!-- 歌词显示与否 -->
      <lyric class="play-music-lyric"
             ref="lyric"
             :lyric="lyric"
             v-show="isLyric" />
      <!-- 下左边上下首的切换按钮 -->
      <div class="play-music-left">
        <!-- 播放前一首 -->
        <div class="pre"
             @click="preMusic()">
          <img src="~assets/img/playmusic/pre.png"
               alt />
        </div>
        <!-- 中间点击按钮，播放与暂停 -->
        <div class="play"
             @click="toggle()">
          <img src="~assets/img/playmusic/play.png"
               alt
               v-if="!isPlay" />
          <img src="~assets/img/playmusic/play2.png"
               alt
               v-else />
        </div>
        <!-- 下一首 -->
        <div class="next"
             @click="nextMusic()">
          <img src="~assets/img/playmusic/next.png"
               alt />
        </div>
      </div>
      <!-- 下右半部分进度条等。。 -->
      <div class="play-music-right">
        <div v-if="playList[currentIndex].src">
          <audio :src="playList[currentIndex].src"
                 autoplay
                 ref="audio"
                 @timeupdate="audioTimeUpdate()"
                 @pause="musicPause()"
                 @ended="musicEnded()"
                 @play="playLoad()"
                 @playing="musicPlaying()"
                 @error="musicErr()">
          </audio>
        </div>
        <!-- 音乐播放进度条 -->
        <div class="music-pro">
          <div class="currentTime">{{currentTime}}</div>
          <Progress class="music-pro-progress"
                    ref="music_pro"
                    @childclick="setMusicCurrent" />
          <div class="totalTime">{{duration}}</div>
        </div>
        <!-- 音量控制块 -->
        <div class="volumn">
          <!-- 是否静音图片显示 -->
          <div class="volumn-icon"
               @click="toggleVolume()">
            <img src="~assets/img/playmusic/volumn.svg"
                 alt
                 v-show="!isVolume" />
            <img src="~assets/img/playmusic/novolumn.svg"
                 alt
                 class="vol-img"
                 v-show="isVolume" />
          </div>
          <!-- 进度条 -->
          <Progress ref="volume_pro"
                    @childclick="setVolume" />
        </div>
        <div class="icon">
          <!-- 播放模式 -->
          <div class="schema"
               @click="toggleSchema()">
            <a href="#"
               title="顺序播放"
               v-show="schemaIndex==0">
              <img src="~assets/img/playmusic/sunxubofang.svg" />
            </a>
            <a href="#"
               title="随机播放"
               v-show="schemaIndex==1">
              <img src="~assets/img/playmusic/suijibofang.svg" />
            </a>
            <a href="#"
               title="单曲循环"
               v-show="schemaIndex==2">
              <img src="~assets/img/playmusic/danquxunhuan.svg" />
            </a>
          </div>
          <!-- 歌词显示隐藏 -->
          <div class="music-lyric"
               @click="toggleLyric()">
            <a href="#"
               title="歌词">
              <img src="~assets/img/playmusic/lyric.svg"
                   v-show="!isLyric" />
            </a>
            <a href="#"
               title="歌词">
              <img src="~assets/img/playmusic/lyric-click.svg"
                   v-show="isLyric" />
            </a>
          </div>
          <!-- 歌单显示隐藏 -->
          <div class="music-list"
               @click="toggleMusicList()">
            <a href="#"
               title="歌单">
              <img src="~assets/img/playmusic/list.svg"
                   alt />
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Player from './Player'
import PlayMusicList from './PlayMusicList.vue';
import Lyric from './Lyric.vue'
import { formatDate } from 'assets/common/tool'
import { _getLyric } from 'network/detail'
import Progress from '../../common/progress/Progress.vue';
export default {
  name: 'PlayMusic',
  components: {
    Player,
    PlayMusicList,
    Lyric,
    Progress
  },
  data () {
    return {
      // 播放按钮图片的切换
      isPlay: false,
      isVolume: false,
      // 歌词是否显示
      isLyric: false,
      // 播放列表显示与隐藏
      isMusicList: false,
      isShade: false,
      // 是否显示这首音乐的播放页面
      isPlayerShow: false,
      path: '',
      // 当前音乐下标
      currentIndex: 0,
      // 当前播放模式下标
      schemaIndex: 0,
      // 当前音乐播放的时间
      currentTime: "00:00",
      // 这首歌总时长
      duration: '00:00',
      lyric: '',
      // 音乐细节列表
      playList: [
        {
          title: "",
          artist: "",
          index: "0",
          // 歌词
          lrc: "",
          // 音源
          src:
            "",
          pic:
            ""
        }
      ],
      // 音乐列表
      musicList: []
    }
  },
  watch: {
    music () {
      if (this.$refs.audio != null) {
        this.$refs.audio.load();
      }
    }
  },
  // Dom改变时，监听
  mounted () {
    // 调用playMusic事件,，开始切换音乐
    this.$bus.$on("playMusic", (list, index, path, musicList) => {
      this.playList = [];
      this.path = path;
      this.playList = list;
      this.musicList = musicList

      this.playList = this.playList.sort((a, b) => {
        return a.index - b.index
      })
      this.setCurrentIndex(index)
    })
    this.$bus.$on('PlayMusicItem', index => {
      this.setCurrentIndex(index)
    })
  },
  methods: {
    // 切换播放音乐
    setCurrentIndex (index) {
      for (const i in this.playList) {
        if (this.playList[i].index === index) {
          this.currentIndex = i;
          break;
        }
      }
    },
    // 点击播放或暂停
    toggle () {
      this.isPlay = !this.isPlay;
      if (this.isPlay && this.$refs.audio.readyState === 4) {
        this.$refs.audio.play()
      } else {
        this.$refs.audio.pause()
      }
    },
    // 随着播放，音乐进度条改变，歌词改变
    audioTimeUpdate () {
      if (this.$refs.audio !== null) {
        this.currentTime = formatDate(new Date(this.$refs.audio.currentTime * 1000), "mm:ss")
      }
      this.duration = formatDate(new Date(this.$refs.audio.duration * 1000), "mm:ss");
      // 当前播放时间与总时间的比，用来设置播放进度条所占长度
      const scale = this.$refs.audio.currentTime / this.$refs.audio.duration;
      this.$refs.music_pro.setProgress(scale);
      if (this.$refs.audio.currentTime !== null) {
        // 改变当前显示的歌词
        this.$refs.lyric.scrollLyric(this.$refs.audio.currentTime)
        this.$refs.player.$refs.playerLyric.maxScroll(this.$refs.audio.currentTime)
      }
    },
    // 获取当前音乐歌词
    playLoad () {
      _getLyric(this.playList[this.currentIndex].id).then(res => {
        if (!res.data.sgc) {
          this.lyric = res.data.lrc.lyric
        } else {
          this.lyric = ''
        }
      })
    },
    // 播放音乐中
    musicPlaying () {
      this.isPlay = true;
      this.$bus.$emit("Playing", this.playList[this.currentIndex].index, this.path)
      if (this.$refs.player !== null) this.$refs.player.isPlay = true
    },
    // 播放暂停
    musicPause () {
      this.isPlay = false;
      if (this.$refs.player !== null) this.$refs.player.isPlay = false
    },
    // 播放错误,下标变成下一首
    musicErr () {
      this.$Message.error("当前音频不可用");
      this.currentIndex++;
    },
    // 切换播放模式
    toggleSchema () {
      if (this.schemaIndex >= 2) this.schemaIndex = 0;
      else this.schemaIndex++;
    },
    // 不同播放模式下，播放结束后，自动播放下一首的选择
    musicEnded () {
      switch (this.schemaIndex) {
        // 顺序播放
        case 0:
          if (this.currentIndex >= this.playList.length - 1) {
            this.currentIndex = 0;
          } else {
            this.currentIndex++;
          }
          break;
        // 随机播放
        case 1:
          this.currentIndex = Math.floor(Math.random() * this.playList.length);
          break;
        // 单曲循环
        case 2:
      }
    },
    // 点击播放下一首音乐
    nextMusic () {
      if (this.currentIndex >= this.playList.length - 1) this.currentIndex = 0
      else this.currentIndex++
      this.$refs.audio.scr = this.playList[this.currentIndex].src
    },
    // 点击播放上一首
    preMusic () {
      if (this.currentIndex <= 0) this.currentIndex = this.playList.length - 1;
      else this.currentIndex--
      this.$refs.audio.scr = this.playList[this.currentIndex].src
    },
    // 点击音量进度条，音量改变
    setVolume (scale) {
      this.$refs.audio.volume = scale
    },
    // 点击进度条，改变当前时间
    setMusicCurrent (scale) {
      this.$refs.audio.currentTime = scale * this.$refs.audio.duration;
    },
    // 切换静音模式
    toggleVolume () {
      this.isVolume = !this.isVolume;
      if (this.isVolume) {
        // 声音
        this.$refs.audio.volume = 0.0;
      } else {
        this.$refs.audio.volume = 0.8;// 进度条比列
        this.$refs.volume_pro && this.$refs.volume_pro.setProgress(0.8)
      }
    },
    // 切换歌词显示与隐藏
    toggleLyric () {
      this.isLyric = !this.isLyric
    },
    // 切换是否显示播放列表
    toggleMusicList () {
      this.isMusicList = !this.isMusicList
    },
    PlayerRouter () {
      this.isPlayerShow = !this.isPlayerShow;
    }
  }
}
</script>

<style scoped>
.play-music {
  width: 100%;
  height: 59px;
  background-color: #212124;
  position: relative;
  z-index: 3;
  bottom: 0;
}
.top {
  width: 15%;
  height: 59px;
  position: absolute;
  left: 0;
  bottom: 59px;
  display: flex;
  background: rgba(221, 221, 221, 0.5);
  color: #000;
}
.top::after {
  clear: both;
}
.bottom {
  width: 100%;
  height: 100%;
  display: flex;
}
.play-music-list {
  position: absolute;
  right: 0;
  bottom: 59px;
}
.play-music-lyric {
  /* width: 460px; */
  height: 30px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 59px;
  z-index: 3;
  margin: auto;
}
.music-top-icon {
  height: 100%;
}
.music-top-icon img {
  height: 100%;
}
.music-max {
  bottom: 64px;
  z-index: 4;
  width: 59px;
  position: absolute;
  bottom: 0;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
}
.music-max img {
  opacity: 0.5;
}
.music-top-center {
  width: 100px;
  position: relative;
  font-size: 13px;
  left: 10px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.music-title {
  white-space: nowrap;
  /* // 超出的部分...表示 */
  text-overflow: ellipsis;
  overflow: hidden;
}
.music-artist {
  position: absolute;
  bottom: 0;
}
.play-music-left {
  display: flex;
  width: 15%;
  height: 100%;
  justify-content: space-around;
  align-items: center;
}
.play-music-left div {
  cursor: pointer;
}
.play-music-left .play img {
  width: 55px;
  height: 55px;
}
.play-music-right {
  flex: 1;
  height: 100%;
  line-height: 59px;
}
/* 音乐进度条 */
.play-music-right .music-pro {
  width: 66%;
  height: 100%;
  float: left;
  display: flex;
  align-items: center;
  text-align: center;
}
.music-pro .currentTime,
.music-pro .totalTime {
  width: 60px;
}
.music-pro .music-pro-progress {
  flex: 1;
}
.play-music-right .volumn {
  width: 10%;
  height: 100%;
  float: left;
  display: flex;
  align-items: center;
}
.volumn-icon img {
  width: 15px;
  margin-right: 10px;
}
.vol-img {
  width: 21px !important;
}
.play-music-right .icon {
  padding: 0px 20px;
  width: 20%;
  height: 100%;
  border-top: 3px;
  float: left;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
/* 播放模式 */
.icon .schema {
  width: 30px;
}
.icon .schema img {
  width: 20px;
  height: 20px;
  vertical-align: -5px;
}
.icon .schema img:nth-child(2) {
  width: 18px;
  height: 18px;
}
.music-lyric {
  width: 20px;
}
.music-lyric img {
  width: 100%;
  vertical-align: -5px;
}
.music-list {
  width: 20px;
}
.music-list img {
  width: 100%;
  vertical-align: -5px;
}
</style>
